<div>
    <div class="ueditor-box">
        <ueditor [(ngModel)]='full_source' [config]='ueditor_config' (onReady)="onReady($event)" #full></ueditor>

        <div class="my-btn-group">
            <pre class="show-message">{{showMessage}}</pre>
            <div [innerHTML]="showMessage | html" class="final-display"></div>
            <a class="btn btn-outline-info" data-toggle="collapse" href="#collapseLang" role="button" aria-expanded="false"
                aria-controls="collapseLang">语言转换</a>
            <div class="collapse" id="collapseLang">
                <hr />
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="languageChange($event, 'zh-cn')">
                    <span>zh-cn</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="languageChange($event, 'en')">
                    <span>en</span>
                </button>
            </div>
            <hr />
            <button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#collapseAPI"
                aria-expanded="false" aria-controls="collapseAPI">
                常用API
            </button>
            <div class="collapse" id="collapseAPI">
                <hr />
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="setContent($event)">
                    <span>写入内容</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="setContent($event, true)">
                    <span>追加内容</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="insertContent($event)">
                    <span>光标处插入给定的内容</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="insertImage($event)">
                    <span>插入图片</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="hasContents($event)">
                    <span>判断是否有内容</span>
                </button>
                <br>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="getAllHtml($event)">
                    <span>获得整个html的内容</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="getContent($event)">
                    <span>获得内容(带html标签)</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="getContentTxt($event)">
                    <span>获得纯文本</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="getPlainTxt($event)">
                    <span>获得带格式的纯文本(能获得但显示需处理)</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="getText($event)">
                    <span>获得当前选中的文本(暂时有问题)</span>
                </button>
                <br>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="onfocus($event)">
                    <span>使编辑器获得焦点</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="onblur($event)">
                    <span>使编辑器失去焦点</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="isOnFocus($event)">
                    <span>判断编辑器是否有焦点</span>
                </button>
                <br>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="setEnabled($event)">
                    <span>编辑器可以编辑</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="setDisabled($event)">
                    <span>编辑器不可编辑</span>
                </button>
                <br>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="setHide($event)">
                    <span>隐藏编辑器</span>
                </button>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="setShow($event)">
                    <span>显示编辑器</span>
                </button>
                <br>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="setHeight($event)">
                    <span>设置编辑器的高度为300</span>
                </button>
                <br>
                <button class="btn-search" type="button" class="btn btn-primary btn-sm" (click)="clearDoc($event)">
                    <span>清空文档</span>
                </button>
            </div>
            <hr />
        </div>
    </div>
</div>